<template>
  <div style="margin-top:20rpx;">
    <van-toast id="van-toast" />
    <div
      class="header"
      v-if="dictFlag==1"
      @click="leftChange"
    >
      <div class="headText">
        <span class="leftText">{{list.first.leftText}}</span>
        <img src="../../../static/img/convert.png">
        <span class="rightText">{{list.first.rightText}}</span>
      </div>
    </div>
    <div
      class="header"
      v-if="dictFlag==2"
      @click="rightChange"
    >
      <div class="headText">
        <span class="leftText">{{list.second.leftText}}</span>
        <img src="../../../static/img/convert.png">
        <span class="rightText">{{list.second.rightText}}</span>
      </div>
    </div>
    <div style="margin-top:15rpx;">
      <div
        class="textValue"
        :style="{textAlign:textAlign,fontFamily:fontFamily}"
      >
        <textarea
          show-confirm-bar="true"
          @confirm="getDict"
          v-model="sourceText"
          maxlength="-1"
          autofocus="true"
          class="areSty"
          placeholder-style="font-size:12px;"
          placeholder="تەرجىمە قىلماقچى بولغان سۆز ياكى جۈملىنى كىرگۈزۈڭ"
        ></textarea>
      </div>
    </div>
    <div class="btn-container">
      <div class="cn-voice">
        <img
          src="../../../static/voice.png"
          @touchmove="cnTouchMove"
          @touchstart="cnTouchstart"
          @longpress="cnLongtap"
          @touchend="cnTouchend"
        >
      </div>
      <div
        class="img-upload"
        @click="imgUpload"
      >
        <img src="../../../static/camera.png">
      </div>
      <div class="ug-voice">
        <img
          src="../../../static/voice.png"
          @touchmove="uyTouchMove"
          @longpress="uyLongtap"
          @touchstart="uyTouchstart"
          @touchend="uyTouchend"
        >
      </div>
    </div>
    <div
      class="notice"
      :style="{display:noticeDisplay}"
      @click="closeNotice"
    >
      <span class="left">按住红色的按钮说话</span>
      <span class="right">
        <i>كۆك كۇنۇپكىنى بېسىپ تۇرۇپ سۆزلەڭ</i>
        <i-icon
          class="iconPos"
          type="close"
        />
      </span>
    </div>
    <div class="advertise">
      <ad unit-id="adunit-9155bec8aa4c0615"></ad>
    </div>
    <!-- <button @click="getDict">ئىزدەش</button> -->
    <div
      class="record"
      :style="{display:recordDisplay}"
    >
      <img src="../../../static/record.gif">
    </div>
    <div
      v-if="transFlag"
      style="padding-top:14rpx;text-align:right!important;"
    >
      <div class="yui">
        <div class="yui-header">
          <span
            class="icon"
            @click="setClipboard"
          >
            <img src="../../../static/img/tabbar/copy.png">
          </span>
          <span class="headerTxt">تەرجىمىسى</span>
        </div>
        <div
          class="content"
          style="text-align:right"
        >
          <span class="contentTxt">{{dictRes}}</span>
        </div>
      </div>
      <div style="margin-top:20rpx;margin-bottom:150rpx">
        <div class="yui">
          <div class="yui-header">
            <span class="icon">
              <span @click="clipPinyin">
                <img src="../../../static/img/tabbar/copy.png">
              </span>
              <span class="voice">
                <i-icon
                  @click.stop="play"
                  v-if="iconFlag"
                  :type="voiceIcon"
                  size="32"
                  color="#aaa"
                />
                <i-icon
                  v-if="!iconFlag"
                  @click.stop="pause"
                  :type="voiceIcon"
                  size="32"
                  color="#aaa"
                />
                <!-- <audio
                  :src="tempFilePath"
                  id="myAudio"
                ></audio> -->
              </span>
            </span>
            <span class="headerTxt">پىنيىنچىسى</span>
          </div>
          <div
            class="content"
            style="text-align:left!important"
          >
            <span class="contentTxt">{{pin}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import { get, post, showTimerToast, randomNumber } from "@/util";
/* import { resolve } from "url";
import { rejects } from "assert";
import { clearTimeout } from "timers"; */
export default {
  data() {
    return {
      dictRes: "",
      pin: "",
      sourceText: "",
      cnTxt: "",
      originTxt: "",
      dictFlag: 1,
      transFlag: false,
      iconFlag: true,
      noticeDisplay: "static",
      recordDisplay: "none",
      textAlign: "left",
      fontFamily: "Arial",
      tempFilePath: "",
      recordTempFilePath: "",
      voiceToken: "",
      imgToken: "",
      imgBase64Ch: "",
      voiceIcon: "systemprompt", //"playon"
      startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。
      cnSendLock: true, //发送锁，当为true时上锁，false时解锁发送
      uySendLock: true, //发送锁，当为true时上锁，false时解锁发送
      list: {
        first: {
          leftText: "国语",
          rightText: "ئۇيغۇرچە",
          from: "zh",
          to: "uy"
        },
        second: {
          leftText: "ئۇيغۇرچە",
          rightText: "国语",
          from: "uy",
          to: "zh"
        }
      }
    };
  },
  created() {},
  methods: {
    leftChange() {
      this.dictFlag = 2;
      this.textAlign = "right";
      this.fontFamily = "Alp Ekran";
    },
    rightChange() {
      this.textAlign = "left";
      this.dictFlag = 1;
      this.fontFamily = "Arial";
    },
    closeNotice() {
      this.noticeDisplay = "none";
    },
    getDict() {
      var reg1 = /([\u4e00-\u9fa5])|(\s)/g;
      var reg2 = /([\u0600-\u06ff])|(\s)/g;

      if (this.dictFlag == 1) {
        if (!this.sourceText) {
          showTimerToast("مەزمۇننى كىرگۈزۈڭ", 500);
        } else if (!reg1.test(this.sourceText)) {
          showTimerToast("خەنزۇچە مەزمۇننى كىرگۈزۈڭ", 500);
        } else if (this.sourceText.length > 250) {
          showTimerToast("خەتتىن ئېشىپ كەتسە بولمايدۇ250", 700);
        } else {
          this.$http
            .post("https://wx.2xur7.cn/weapp/dict", {
              txt: this.sourceText,
              from: "zh"
            })
            .then(res => {
              // console.log(res);
              this.cnTxt = this.sourceText;
              this.dictRes = res.data.data.res_txt;
              this.pin = res.data.data.pin;
              this.transFlag = true;
              this.voiceTTS(this.sourceText);
            });
        }
      } else {
        if (!this.sourceText) {
          showTimerToast("مەزمۇننى كىرگۈزۈڭ", 500);
        } else if (!reg2.test(this.sourceText)) {
          showTimerToast("ئۇيغۇرچە مەزمۇننى كىرگۈزۈڭ", 500);
        } else {
          this.$http
            .post("https://wx.2xur7.cn/weapp/dict", {
              txt: this.sourceText,
              from: "uy"
            })
            .then(res => {
              this.cnTxt = res.data.data.res_txt;
              this.dictRes = res.data.data.res_txt;
              this.pin = res.data.data.pin;
              this.transFlag = true;
              this.voiceTTS(res.data.data.res_txt);
            });
        }
      }
    },
    setClipboard(e) {
      // console.log(e)
      wx.setClipboardData({
        data: this.dictRes, //需要设置的内容,
        success: res => {}
      });
    },
    clipPinyin() {
      wx.setClipboardData({
        data: this.pin, //需要设置的内容,
        success: res => {}
      });
    },
    async voiceTTS(text) {
      let tokens = wx.getStorageSync("dictSrc");
      tokens = JSON.parse(tokens);
      this.voiceToken = tokens.voiceToken;
      let tts_url = `https://tsn.baidu.com/text2audio`;
      let tex = encodeURI(encodeURI(text)),
        tok = this.voiceToken,
        cuid = this.voiceToken,
        ctp = 1,
        lan = "zh",
        spd = 4,
        pit = 5,
        vol = 8,
        per = 0,
        aue = 3;
      let ttsURL = `${tts_url}?tex=${tex}&tok=${tok}&cuid=${tok}&ctp=${ctp}&lan=${lan}&spd=${spd}&pit=${pit}&vol=${vol}&per=${per}&aue=${aue}`;
      wx.downloadFile({
        url: ttsURL, // 下载资源的 url
        success: res => {
          this.tempFilePath = res.tempFilePath;
          if (res.statusCode === 200) {
            wx.playVoice({
              filePath: res.tempFilePath
            });
          }
        },
        fail: () => {},
        complete: () => {}
      });
    },
    play() {
      this.innerAudioContext = wx.createInnerAudioContext();
      this.innerAudioContext.src = this.tempFilePath;
      this.innerAudioContext.play();
      this.voiceIcon = "offline";
      this.iconFlag = false;
    },
    pause() {
      this.voiceIcon = "systemprompt";
      this.iconFlag = true;
      this.innerAudioContext.pause();
    },
    imgUpload() {
      wx.chooseImage({
        count: "1", //最多可以选择的图片张数,
        sourceType: ["album", "camera"],
        success: res => {
          wx.showLoading();
          this.imgBase64Ch =
            "data:image/jpeg;base64," +
            wx
              .getFileSystemManager()
              .readFileSync(res.tempFilePaths[0], "base64"); //图片转base64
          this.$http
            .post("https://wx.2xur7.cn/weapp/uploader", {
              base64: this.imgBase64Ch
            })
            .then(res => {
              if (res.data.data.msg == "success") {
                let imgurl = res.data.data.url; //获取图片地址
                let ocrURL = `https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token=${
                  this.imgToken
                }`;
                this.$http
                  .post(
                    ocrURL,
                    { url: imgurl },
                    {
                      headers: {
                        "content-type": "application/x-www-form-urlencoded"
                      }
                    }
                  )
                  .then(res => {
                    let ocrTxtArr = []; //把对象中的每行文字push进数组里
                    let ocrTxt = res.data.words_result;
                    ocrTxt = ocrTxt.map(item => {
                      return ocrTxtArr.push(item.words);
                    });
                    // console.log(ocrTxtArr.toString());
                    let words = ocrTxtArr.toString();
                    this.sourceText = words;
                    if (words.length > 250) {
                      showTimerToast("خەت سانى 250 دىن ئېشىپ كەتسا بولمايدۇ");
                      wx.hideLoading();
                    } else {
                      this.$http
                        .post("https://wx.2xur7.cn/weapp/dict", {
                          txt: words,
                          from: "zh"
                        })
                        .then(res => {
                          // console.log(res);
                          this.cnTxt = this.sourceText;
                          this.dictRes = res.data.data.res_txt;
                          this.pin = res.data.data.pin;
                          this.transFlag = true;
                          this.voiceTTS(words);
                          wx.hideLoading();
                        });
                    }
                  })
                  .catch(err => {
                    showTimerToast("مەغلۇپ بولدى", 700);
                  });
              } else {
                showTimerToast("مەغلۇپ بولدى", 700);
              }
            })
            .catch(err => {
              console.log(err);
              wx.hideLoading();
            });
        },
        fail: () => {
          wx.hideLoading();
        },
        complete: () => {}
      });
    },
    cnTouchMove(e) {
      // console.log("长按事件", e.mp);
      let moveLenght =
        e.mp.touches[e.mp.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
      // console.log(moveLenght);
      if (Math.abs(moveLenght) > 50) {
        this.recordDisplay = "none";
        showTimerToast("ئەمەلدىن قالدۇردىڭىز", 1000);
        this.cnSendLock = false; //触发了上滑取消发送，上锁
        this.recordManger.stop();
        // this.recordManger = false;
      } else {
        this.cnSendLock = true;
      }
    },
    cnLongtap(e) {},
    cnTouchstart(e) {
      this.startPoint = e.mp.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
      this.recordDisplay = "block";
      this.startTime = e.mp.timeStamp;

      this.recordManger = wx.getRecorderManager();
      this.cnRecord = wx.createInnerAudioContext();
      const options = {
        duration: 10000, //指定录音的时长，单位 ms
        sampleRate: 16000, //采样率
        numberOfChannels: 1, //录音通道数
        encodeBitRate: 96000, //编码码率
        frameSize: 50, //指定帧大小，单位 KB
        format: "mp3"
      };
      this.recordManger.start(options);
      this.recordManger.onStart(() => {
        // console.log("recorder start");
      });
      //错误回调
      this.recordManger.onError(res => {
        console.log(res);
      });
      this.cnSendLock = true;
    },
    cnTouchend(e) {
      this.recordDisplay = "none";
      this.endTime = e.mp.timeStamp;
      if (this.cnSendLock) {
        this.recordManger.stop();
        this.recordManger.onStop(res => {
          // console.log(res);
          this.recordTempFilePath = res.tempFilePath;
          // console.log("停止录音", res.tempFilePath);
          // const { recordTempFilePath } = res;

          let tokens = wx.getStorageSync("dictSrc");
          tokens = JSON.parse(tokens);
          this.voiceToken = tokens.voiceToken;
          wx.showLoading();
          wx.uploadFile({
            url: "https://wx.2xur7.cn/weapp/voiceupload", //开发者服务器 url
            filePath: res.tempFilePath, //要上传文件资源的路径
            name: "file", //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
            header: { "Content-Type": "multipart/form-data" },
            formData: {
              lang: "cn",
              token: this.voiceToken
            },
            success: res => {
              let result = JSON.parse(res.data);
              if (result.code == 200) {
                // console.log(result);
                this.sourceText = result.voiceTxt;
                this.dictRes = result.uyTxt;
                this.pin = result.pinyin;
                this.transFlag = true;
              } else {
                wx.hideLoading();

                showTimerToast("مەغلۇپ بولدى", 1000);
              }
              // console.log(res);
              wx.hideLoading();
              // this.sourceText = JSON.parse(result.msg).result[0];
            },
            fail: () => {
              wx.hideLoading();
            },
            complete: () => {
              wx.hideLoading();
            }
          });
        });
      } else {
        showTimerToast("ئەمەلدىن قالدۇردىڭىز", 1000);
      }
    },
    uyTouchMove(e) {
      // console.log("长按事件", e.mp);
      let moveLenght =
        e.mp.touches[e.mp.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
      // console.log(moveLenght);
      if (Math.abs(moveLenght) > 50) {
        this.recordDisplay = "none";
        showTimerToast("ئەمەلدىن قالدۇردىڭىز", 1000);
        this.uySendLock = false; //触发了上滑取消发送，上锁
        this.recordManger.stop();
        // this.recordManger = false;
      } else {
        this.uySendLock = true;
      }
    },
    uyLongtap(e) {
      // console.log("长按事件", e.mp);
    },
    uyTouchstart(e) {
      this.startPoint = e.mp.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
      this.recordDisplay = "block";
      this.startTime = e.mp.timeStamp;

      this.recordManger = wx.getRecorderManager();
      this.cnRecord = wx.createInnerAudioContext();
      const options = {
        duration: 10000, //指定录音的时长，单位 ms
        sampleRate: 16000, //采样率
        numberOfChannels: 1, //录音通道数
        encodeBitRate: 96000, //编码码率
        frameSize: 50, //指定帧大小，单位 KB
        format: "mp3"
      };
      this.recordManger.start(options);
      this.recordManger.onStart(() => {
        // console.log("recorder start");
      });
      //错误回调
      this.recordManger.onError(res => {
        console.log(res);
      });
      this.uySendLock = true;
    },
    uyTouchend(e) {
      this.recordDisplay = "none";
      this.endTime = e.mp.timeStamp;
      if (this.uySendLock) {
        this.recordManger.stop();
        this.recordManger.onStop(res => {
          // console.log(res);
          this.recordTempFilePath = res.tempFilePath;
          // console.log("停止录音", res.tempFilePath);
          // const { recordTempFilePath } = res;

          let tokens = wx.getStorageSync("dictSrc");
          tokens = JSON.parse(tokens);
          this.voiceToken = tokens.voiceToken;
          wx.showLoading();
          wx.uploadFile({
            url: "https://wx.2xur7.cn/weapp/voiceupload", //开发者服务器 url
            filePath: res.tempFilePath, //要上传文件资源的路径
            name: "file", //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
            header: { "Content-Type": "multipart/form-data" },
            formData: {
              lang: "uy"
            },
            success: res => {
              if (res.statusCode == 200) {
                let result = JSON.parse(res.data).resBody;
                // console.log("运行了", result);
                this.sourceText = result.uyTxt;
                this.dictRes = result.cnTxt;
                this.pin = result.pin;
                this.transFlag = true;
                wx.hideLoading();
                this.voiceTTS(this.dictRes);
              } else {
                showTimerToast("مەغلۇپ بولدى", 700);
              }
            },
            fail: () => {
              wx.hideLoading();
            },
            complete: () => {}
          });
        });
      }
    }
  },
  async onLoad() {
    let nowTimeStamp = new Date().getTime();
    // let tokens = JSON.parse(wx.getStorageSync("dictSrc"));
    let tokens = wx.getStorageSync("dictSrc");
    if (
      tokens &&
      nowTimeStamp - JSON.parse(tokens).timeStamp < 1000 * 60 * 60 * 24
    ) {
      tokens = JSON.parse(tokens);
      this.voiceToken = tokens.voiceToken;
      this.imgToken = tokens.imgToken;
    } else {
      wx.showLoading();
      let grant_type = "client_credentials",
        app_key = "BOerpTjexLFc2Gm2z9Zy3Dm4",
        app_secret = "GRnHU6wZPNDpukjlaCp9SikHKLKp0PO7";
      let baidu_url = "https://openapi.baidu.com/oauth/2.0/token";
      let tts_data = qs.stringify({
        grant_type: grant_type,
        client_id: app_key,
        client_secret: app_secret
      });
      let tts_data2 = qs.stringify({
        grant_type: "client_credentials",
        client_id: "s2PmAxuiRXEMpLlim1sFHIfZ",
        client_secret: "LnLGQq0RW8ggzbGSdSdfQMffGSGT5WcF"
      });
      let baidu_url2 = "https://aip.baidubce.com/oauth/2.0/token";
      let token = await this.$http.get(baidu_url, tts_data); //获取百度语音合成token
      let access_token = await this.$http.post(baidu_url2, tts_data2);
      this.voiceToken = token.data.access_token;
      this.imgToken = access_token.data.access_token;
      wx.hideLoading();

      // 保存时间戳，和token
      let dt = new Date();
      let dictSrc = {
        voiceToken: this.voiceToken,
        imgToken: this.imgToken,
        timeStamp: dt.getTime()
      };
      wx.setStorageSync("dictSrc", JSON.stringify(dictSrc));
    }
  },
  destroyed() {
    if (this.innerAudioContext) {
      this.innerAudioContext.pause();
    }
    wx.hideLoading();
  },
  onShareAppMessage() {
    return {
      title: "Qolay Dict",
      path: "/pages/Dict/main",
      // imageUrl: 'url',
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  onReady() {
    wx.setNavigationBarTitle({ title: "تەرجىمان" });
  }
};
</script>
<style lang="scss" >
page {
  overflow: hidden !important;
  height: 100% !important;
}
// @import url("../../static/CSS/mui.css");
.header {
  margin-top: 10px;
  width: 98%;
  height: 90rpx;
  text-align: center;
  vertical-align: middle;
  border-radius: 10px;
  box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(0, 0, 0, 0.1);

  margin-bottom: 10px;
  /*   border-top: 1rpx solid #e9eaec;
  border-left: 1rpx solid #e9eaec;
  border-right: 1rpx solid #e9eaec; */
  border: 1px solod #e9eaec;
  // border-bottom: 1rpx solid #e9eaec;
  margin: 0 auto;
  .headText {
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    width: 80%;
    img {
      width: 40rpx;
      height: 40rpx;
      margin-top: 24rpx;
      margin-left: 7rpx;
      position: absolute;
    }
    .leftText {
      line-height: 90rpx;
      font-size: 29rpx;
      // color: #1c2438;
      color: #1abc9c;
    }
    .rightText {
      line-height: 90rpx;
      font-size: 29rpx;
      // color: #1c2438;
      color: #1abc9c;
    }
  }
}
.textValue {
  .areSty {
    height: 200rpx;
    // font-family: "Alp Ekran" !important;
    border: 1px solid #efeff4;
    width: 91%;
    padding: 22rpx 25rpx;
    box-shadow: 0 0 20rpx 3rpx rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    border: 1rpx solid #ffffff;
    border-radius: 10px 10px 10px 10px;
    font-size: 29rpx;
    margin-bottom: 11rpx;
  }
}
.btnContainer {
  width: 96%;
  margin: 0 auto;
  padding-top: 10rpx;
  .btn {
    border: solid 1px #1abc9c;
    margin: 0 auto;
    position: relative;
    color: #1abc9c;
    font-size: 16px;
    line-height: 75rpx;
    box-shadow: inset 0 0 0 1px rgba(26, 188, 156, 0.1);
    height: 78rpx;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .btn:active {
    background-color: #fcfcfc;
    color: #409eff;
    border-color: #409eff;
  }
}
.yui {
  color: #1c2438;
  width: 95%;
  margin: 0 auto;
  min-height: 150rpx;
  border: 1px solid #efeff4;
  box-shadow: 0 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: relative;
  .yui-header {
    border-bottom: 2px solid #efeff4;
    height: 85rpx;
    border-radius: 2px 2px 0 0;
    font-size: 17px;
    text-align: right;
    // display: inline;
    display: flex;
    justify-content: space-between;
    .headerTxt {
      line-height: 91rpx;
      margin-right: 31rpx;
      text-align: right;
    }
    .voice {
      position: absolute;
      top: 14rpx;
      right: 175rpx;
    }
    .icon {
      img {
        margin-left: 30rpx;
        padding-top: 32rpx;
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .content {
    margin: 20rpx auto;
    min-height: 80rpx;
    padding: 0 15rpx;
    span::before {
      content: "\2003\2003";
    }
    .contentTxt {
      color: #424242;
      margin-right: 20rpx;
      text-indent: 2em;
      // margin-top: 100rpx;
      // text-align: right;
      font-size: 28rpx;
    }
  }
  .footer {
    height: 50px;
    border-top: 2px solid #efeff4;
    text-align: right;
  }
}

.box {
  width: 200rpx;
  height: 200rpx;
  box-sizing: border-box;
  border: 10rpx solid transparent;
  border-radius: 50%;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  // background-image: linear-gradient(0deg, #fff, #fff),
  //   linear-gradient(0deg, #2d8cf0, #ed3f14);
}
.btn-container {
  width: 97%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 21rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.1);
  padding: 10rpx 0;
  img {
    width: 70rpx;
    height: 68rpx;
    vertical-align: 32rpx;
    margin-left: 26rpx;
    margin-top: 25rpx;
  }
  .cn-voice {
    width: 120rpx;
    height: 120rpx;
    // border: 1rpx solid #666666;
    border-radius: 50%;
    background-color: #f40;
  }
  .img-upload {
    width: 120rpx;
    height: 120rpx;
    border: 1rpx solid #666666;
    border-radius: 50%;
  }
  .ug-voice {
    width: 120rpx;
    height: 120rpx;
    // border: 1px solid #666666;
    border-radius: 50%;
    background-color: #409eff;
  }
}
.notice {
  width: 97%;
  height: 65rpx;
  margin: 0 auto;
  margin-top: 10rpx;
  border-radius: 13rpx;
  box-shadow: 0 0 21rpx 2rpx rgba(0, 0, 0, 0.1);
  font-size: 25rpx;
  color: #666;
  display: flex;
  justify-content: space-around;
  margin-bottom: 10rpx;
  .left {
    line-height: 65rpx;
  }
  .right {
    position: relative;
    line-height: 65rpx;
    .iconPos {
      position: absolute;
      right: -39rpx;
      top: 0rpx;
    }
  }
}
.record {
  img {
    width: 200rpx;
    height: 200rpx;
    opacity: 0.6;
    position: absolute;
    left: 267rpx;
    top: 150rpx;
  }
}
</style>
